<template>
  <el-pagination
    background
    :current-page.sync="currentPage"
    layout="prev, pager, next, sizes"
    :total="total"
    :page-size="pageSize"
    class="pagination"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>
<style lang="scss" scoped>
  .pagination{
    margin-top: 40px;
    text-align: end;
  }
  ::v-deep .el-pagination li{
    background: transparent;
    border: 1px solid #CCCCCC;
    color: #999999;
    font-weight: 500;
    border-radius: 2px 2px 2px 2px;
  }
  ::v-deep .el-pagination li.active{
    background: #217FE4;
  }
  ::v-deep .el-pagination .btn-prev{
    background: transparent;
    border: 1px solid #CCCCCC;
    color: #999999;
  }
  ::v-deep .el-pagination .btn-next{
    background: transparent;
    border: 1px solid #CCCCCC;
    color: #999999;
  }
</style>
